<template>
  <div class="home-page__content" :style="mediaQueryDevSize">
    <h1>所有视频</h1>
    <div class="home-page__content--card">
      <card v-for="item in vedioInfo" :key="item.id" class="home-page__content--card-item">
        <p>{{ item.title }}</p>
        <p>{{ timeStampToDateFn(item.createTime) }}</p>
      </card>
    </div>
  </div>
</template>

<script>
import Card from '../../base/card'
import { timeStampToDate } from '../../util/time'

const URL = '/api/home/vedioInfo' // 获取视频数据
const GAP = 1000

export default {
  components: {
    Card
  },

  data() {
    return {
      vedioInfo: [],
      dateNow: Date.now()
    }
  },

  computed: {
    mediaQueryDevSize() {
      let { pcMinSize, padMinSize } = this.$store.state.mediaQueryDevSize
      return {
        '--pcMinSize': pcMinSize,
        '--padMinSize': padMinSize
      }
    }
  },

  mounted() {
    this.init()
  },

  methods: {
    init() {
      this.loadData()
    },

    async loadData() {
      let { success, data } = await this.$axios('get', URL)

      if (!success) {
        alert('获取数据失败')
        return
      }

      this.vedioInfo = data
    },

    timeStampToDateFn(time) {
      return `${timeStampToDate(Math.floor((this.dateNow - time) / GAP))} 以前`
    }
  }
}
</script>

<style scoped>
.home-page__content {
  margin-top: 20px;
}

.home-page__content h1 {
  font-weight: 600;
  font-size: 24px;
}

.home-page__content--card {
  margin-top: 20px;
  width: 100%;
}

.home-page__content--card-item p:first-child {
  font-weight: 700;
  font-size: 16px;
}

.home-page__content--card-item p:last-child {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}

/* 判断pc */
@media (min-width: 1024px) {
  .home-page__content--card-item {
    margin-right: 30px;
    width: calc(100% / 4 - 30px);
  }
}

/* 判断ipad */
@media (min-width: 768px) and (max-width: 1024px) {
  .home-page__content--card-item {
    margin-right: 30px;
    width: calc(100% / 2 - 30px);
  }
}

/* 判断手机 */
@media (max-width: 768px) {
  .home-page__content--card-item {
    width: 100%;
  }
}
</style>